<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Include example</title>
	<style type="text/css">
	
	.section { margin: 1em 0; padding: 0.5em; border: 2px dotted #ccc; }
		
	</style>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
	<script src="../js/jquery.include-min.js" type="text/javascript"></script>
	<script type="text/javascript">
	
	// post-process the includes:
	$(document).includeReady(function () {
		$('body').append('<p><em>Successfully loaded <strong>' + $('div.section').length + '</strong> sections.</em></p>');
	});
	
	</script>
</head>

<body>
	
	<h1>Client-side include</h1>
	
	<h2><a href="http://code.google.com/p/jquery-include/">A jQuery plugin</a></h2>
	
	<p>This page should contain some included lists - the included content is indicated with grey dotted borders.</p>
	<ul>
		<li>The includes are handled client-side.</li>
		<li>Nested includes are supported.</li>
		<li>A jQuery includeReady event is provided for post-processing scripts.</li>
	</ul>
	<p>Note: When used in a file system Firefox 3.x will not load includes above the current page file context. E.G.
	<code>&lt;span src=&quot;../includes/nav.html&quot;&gt;</code> will not work when you load from a file:// url.</p>
	
	
	
	<span src="includes/test1.html">
		[test1 include has not loaded]
	</span>
	<p>Images from <a href="http://www.flickr.com/photos/johnhunter/">catenjohn</a></p>

	<span src="includes/footer.html">
		[footer include has not loaded]
	</span>

</body>
</html>
